#taskbar {
   width: 100%;
   height: 2rem;
   padding: 2px 0;
   border-top: 2px solid #eee;
   position: absolute;
   bottom: 0;
   left: 0;
   user-select: none;
}
.ct-95 #taskbar {
   background-color: #ccc;
}
.ct-xp #taskbar {
   background-image: linear-gradient(to right, #77a9ce 0%, #2d7db5 25%, #2d7db5 75%, #77a9ce 100%);
}

.application-segment {
   float: left;
   cursor: pointer;
}
.ct-95 .application-segment {
   height: calc(100% - 8px);
   background-color: #ccc;
   margin-top: 2px;
   border: 2px solid;
   border-top-color: #e5e5e5;
   border-left-color: #e5e5e5;
   border-bottom-color: #888;
   border-right-color: #888;
   box-shadow: 0 -2px 0 0 #fff, -2px 0 0 0 #fff, -2px -2px 0 0 #fff, 0 2px 0 0 #000, 2px 0 0 0 #000, 2px 2px 0 0 #000;
}

/***** START ICON *****/
#start-icon {
   float: left;
   cursor: pointer;
}
.ct-95 #start-icon {
   padding: 0 0.2rem;
   margin: 2px 0.2rem 0 4px;
}
.ct-95 #start-icon.opened {
   background-color: #bbb;
   border-top-color: #888;
   border-left-color: #888;
   border-bottom-color: #e5e5e5;
   border-right-color: #e5e5e5;
   box-shadow: 0 -2px 0 0 #000, -2px 0 0 0 #000, -2px -2px 0 0 #000, 0 2px 0 0 #fff, 2px 0 0 0 #fff, 2px 2px 0 0 #fff;
}
.ct-95 #start-icon.opened:hover {
   background-color: #c5c5c5;
}
.ct-95 #start-icon.opened:active {
   background-color: #b5b5b5;
}
.ct-95 #start-icon:hover {
   background-color: #d5d5d5;
}
.ct-95 #start-icon:active {
   background-color: #c5c5c5;
}
.ct-95 #start-icon .img {
   --size: calc(2rem - 8px);
   width: var(--size);
   height: var(--size);
   background-image: url(../../images/win95/win95-start-icon.png);
   background-size: var(--size) var(--size);
   float: left;
}
.ct-95 #start-icon .text {
   font-family: 'MS Sans Serif';
   font-weight: bold;
   margin-left: 0.2rem;
   float: right;
}

.taskbar-application {
   max-width: 12rem;
   height: calc(2rem - 8px);
   margin: 2px 0 0 10px;
   padding: 0 2px 0 32px;
   border: 2px solid;
   border-top-color: #e5e5e5;
   border-right-color: #888;
   border-bottom-color: #888;
   border-left-color: #e5e5e5;
   box-shadow: 0 -2px 0 0 #fff, -2px 0 0 0 #fff, -2px -2px 0 0 #fff, 0 2px 0 0 #000, 2px 0 0 0 #000, 2px 2px 0 0 #000;
   float: left;
   position: relative;
   cursor: pointer;
}
.taskbar-application.open {
   background-color: #fafafa;
   background-image: url(../../images/win95/button-bg-striped.png);
   background-size: 26px 26px;
   border-top-color: #999;
   border-left-color: #999;
   border-bottom-color: #ccc;
   border-right-color: #ccc;
   box-shadow: 0 -2px 0 0 #222, -2px 0 0 0 #222, -2px -2px 0 0 #222, 0 2px 0 0 #fff, 2px 0 0 0 #fafafa, 2px 2px 0 0 #fafafa;
}
.taskbar-application.open:hover {
   background-color: #fff;
   border-top-color: #aaa;
   border-left-color: #aaa;
   border-bottom-color: #ccc;
   border-right-color: #ccc;
   box-shadow: 0 -2px 0 0 #333, -2px 0 0 0 #333, -2px -2px 0 0 #333, 0 2px 0 0 #fff, 2px 0 0 0 #fff, 2px 2px 0 0 #fff;
}
.taskbar-application.open:active {
   background-color: #f5f5f5;
   border-top-color: #8b8b8b;
   border-left-color: #8b8b8b;
   border-bottom-color: #ccc;
   border-right-color: #ccc;
   box-shadow: 0 -2px 0 0 #111, -2px 0 0 0 #111, -2px -2px 0 0 #111, 0 2px 0 0 #f5f5f5, 2px 0 0 0 #f5f5f5, 2px 2px 0 0 #f5f5f5;
}
.taskbar-application:hover {
   background-color: #d5d5d5;
   border-right-color: #999;
   border-bottom-color: #999;
   box-shadow: 0 -2px 0 0 #fff, -2px 0 0 0 #fff, -2px -2px 0 0 #fff, 0 2px 0 0 #333, 2px 0 0 0 #333, 2px 2px 0 0 #333;
}
.taskbar-application:active {
   background-color: #c5c5c5;
   border-right-color: #777;
   border-bottom-color: #777;
   box-shadow: 0 -2px 0 0 #fff, -2px 0 0 0 #fff, -2px -2px 0 0 #fff, 0 2px 0 0 #000, 2px 0 0 0 #000, 2px 2px 0 0 #000;
}
.taskbar-application img {
   width: 28px;
   height: 28px;
   position: absolute;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
}
.taskbar-application p {
   font-family: "MS Sans Serif";
   line-height: calc(2rem - 8px);
   margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: pre;
}

/* .ct-95 .application {
   min-width: 10rem;
   margin-left: 0.3rem;
}
.ct-xp .application {
   border: 1px solid rgba(243, 248, 252, 0.6);
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   border-bottom: none;
   padding: 0.1em 0.8rem;
   margin-right: 0.2rem;
}

.application :is(img, .text) {
   float: left;
}
.ct-95 .application img {
   margin-left: 0.2rem;
}
.ct-95 .application .text {
   font-size: 0.95rem;
   font-family: 'MS Sans Serif';
   margin-left: 0.2rem;
}
.application.closed:hover {
   background-color: #d5d5d5;
}
.application.closed:active {
   background-color: #c5c5c5;
}
.application:not(.closed) {
   background-color: #f5f5f5;
   border-top-color: #888;
   border-left-color: #888;
   border-bottom-color: #ccc;
   border-right-color: #ccc;
   box-shadow: 0 -2px 0 0 #000, -2px 0 0 0 #000, -2px -2px 0 0 #000, 0 2px 0 0 #fff, 2px 0 0 0 #fff, 2px 2px 0 0 #fff;
}

.application-icon {
   width: 1.8em;
}

#computer .application:active {
   background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
}

.application-icon:not(:active) {
   animation: iconJump 0.6s linear;
}

@keyframes iconJump {
   0% {
      margin-top: 0em;
   }
   20% {
      margin-top: -0.3em;
   }
   30% {
      margin-top: -0.3em;
   }
   100% {
      margin-top: 0em;
   }
} */


/* Start Menu */
.start-menu-container {
   width: 10rem;
   background-color: #ccc;
   border: 2px solid;
   border-top-color: #eee;
   border-left-color: #eee;
   border-right-color: #000;
   border-bottom-color: #000;
   position: absolute;
}
.start-menu-container .section {
   --height: 2rem;
   width: 100%;
   height: var(--height);
   position: relative;
   cursor: pointer;
}
.start-menu-container .section:hover {
   background-color: #dadada;
}
.start-menu-container .section:active {
   background-color: #c0c0c0;
}
.start-menu-container .section img {
   height: 24px;
   width: 24px;
   left: 0.5rem;
}
.start-menu-container .section p {
   font-family: "MS Sans Serif";
   font-size: 0.95rem;
   margin: 0;
   left: 2.5rem;
   user-select: none;
}
.start-menu-container .section :is(img, p) {
   position: absolute;
   top: calc(var(--height) / 2);
   transform: translateY(-50%);
}
.start-menu-container .section .underline {
   text-decoration: underline;
}
.start-menu-container .section.opened {
   color: #fff;
   background-color: rgb(7, 30, 129);
}
.start-menu-container .section .arrow {
   width: 6px;
   height: 6px;
   border-top: 3px solid #000;
   border-right: 3px solid #000;
   position: absolute;
   right: 10px;
   top: 50%;
   transform: rotate(45deg) translateY(-50%);
}
.start-menu-container .section.opened .arrow {
   border-color: #fff;
}

/* .start-menu-section {
   width: 5rem;
   height: 5rem;
   background-color: red;
   position: absolute;
   left: calc(10rem + 4px);
   bottom: calc(2rem + 8px);
} */